<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>


<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">



  <meta name="description" content="hexo如何添加自定义站内搜索"/>




  <meta name="keywords" content="hexo, hexo-generator-search, 八一" />



  <meta name="baidu-site-verification" content="HhUstaSjr0" />



  <meta name="google-site-verification" content="UA-102975942-1" />






  <link rel="alternate" href="/atom.xml" title="八一">




  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=2.6.0" />



<link rel="canonical" href="https://bay1.top/2017/07/20/如何实现站内搜索/"/>


<link rel="stylesheet" type="text/css" href="/css/style.css?v=2.6.0" />
<link rel="stylesheet" type="text/css" href="/css/prettify.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/sons-of-obsidian.css" media="screen" />



  <link rel="stylesheet" type="text/css" href="/lib/fancybox/jquery.fancybox.css" />




  
  <script id="baidu_analytics">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?9a885cc9fb6cd7bcef579deb8efe8a70";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>



  <script id="google_analytics">
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-102975942-1', 'auto');
        ga('send', 'pageview');
  </script>










    <title> hexo如何添加自定义站内搜索 - 八一 </title>
  </head>

  <body><div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/." class="logo">八一</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    
      <a href="/archives">
        <li class="mobile-menu-item">
          
          
            文章
          
        </li>
      </a>
    
      <a href="/tags">
        <li class="mobile-menu-item">
          
          
            标签
          
        </li>
      </a>
    
      <a href="/about">
        <li class="mobile-menu-item">
          
          
            关于/友链
          
        </li>
      </a>
    
      <a href="/search">
        <li class="mobile-menu-item">
          
          
            站内搜索
          
        </li>
      </a>
    
  </ul>
</nav>

    <div class="container" id="mobile-panel">
      <header id="header" class="header"><div class="logo-wrapper">
  <a href="/." class="logo">八一</a>
</div>

<nav class="site-navbar">
  
    <ul id="menu" class="menu">
      
        <li class="menu-item">
          <a class="menu-item-link" href="/archives">
            
            
              文章
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/tags">
            
            
              标签
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/about">
            
            
              关于/友链
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/search">
            
            
              站内搜索
            
          </a>
        </li>
      
    </ul>
  
</nav>

      </header>

      <main id="main" class="main">
        <div class="content-wrapper">
          <div id="content" class="content">
            
  
  <article class="post">
    <header class="post-header">
      <h1 class="post-title">
        
          hexo如何添加自定义站内搜索
        
      </h1>

      <div class="post-meta">
        <span class="post-time">
          2017-07-20
        </span>
        
        
        
      </div>
    </header>

    
    
  <div class="post-toc" id="post-toc">
    <h2 class="post-toc-title">文章目录</h2>
    <div class="post-toc-content">
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#主要的步骤"><span class="toc-text">主要的步骤</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#生成搜索框"><span class="toc-text">生成搜索框</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#插件安装"><span class="toc-text">插件安装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#解析函数"><span class="toc-text">解析函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#放置js文件和输入框"><span class="toc-text">放置js文件和输入框</span></a></li></ol>
    </div>
  </div>


    <div class="post-content">
      
        <p>Hexo如何实现站内搜索<a id="more"></a></p>
<h2 id="主要的步骤"><a href="#主要的步骤" class="headerlink" title="主要的步骤"></a>主要的步骤</h2><blockquote>
<p>   1.利用插件hexo-generator-search生成xml文件<br>    2.利用jQ.ajax解析xml<br>    3.寻找所用主题对应文件修改</p>
</blockquote>
<p><strong>主要的部分还是插件写的好啊，对应的解析函数也是改造插件作者的</strong></p>
<h2 id="生成搜索框"><a href="#生成搜索框" class="headerlink" title="生成搜索框"></a>生成搜索框</h2><blockquote>
<p>加到index.ejs</p>
</blockquote>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">section</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"h1"</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>站内搜索<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"site_search"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">id</span>=<span class="string">"local-search-input"</span> <span class="attr">style</span>=<span class="string">"width: 200px;"</span> <span class="attr">results</span>=<span class="string">"0"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"local-search-result"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>输入框样式可以自己修改我只是修改了宽度,可以这里直接加style<br>如果样式加的多，可以找下主题style文件</p>
</blockquote>
<h2 id="插件安装"><a href="#插件安装" class="headerlink" title="插件安装"></a>插件安装</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save hexo-generator-search</span><br></pre></td></tr></table></figure>
<blockquote>
<p>这个插件可以生成供搜索的索引数据<br><a href="https://github.com/PaicHyperionDev/hexo-generator-search" target="_blank" rel="noopener">插件配置说明</a></p>
</blockquote>
<h2 id="解析函数"><a href="#解析函数" class="headerlink" title="解析函数"></a>解析函数</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br></pre></td><td class="code"><pre><span class="line">var searchFunc = function(path, search_id, content_id) &#123;</span><br><span class="line">    'use strict'; //使用严格模式</span><br><span class="line">    $.ajax(&#123;</span><br><span class="line">        url: path,</span><br><span class="line">        dataType: "xml",</span><br><span class="line">        success: function( xmlResponse ) &#123;</span><br><span class="line">            // 从xml中获取相应的标题等数据</span><br><span class="line">            var datas = $( "entry", xmlResponse ).map(function() &#123;</span><br><span class="line">                return &#123;</span><br><span class="line">                    title: $( "title", this ).text(),</span><br><span class="line">                    content: $("content",this).text(),</span><br><span class="line">                    url: $( "url" , this).text()</span><br><span class="line">                &#125;;</span><br><span class="line">            &#125;).get();</span><br><span class="line">            //ID选择器</span><br><span class="line">            var $input = document.getElementById(search_id);</span><br><span class="line">            var $resultContent = document.getElementById(content_id);</span><br><span class="line">            $input.addEventListener('input', function()&#123;</span><br><span class="line">                var str='<span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">\</span>"<span class="attr">search-result-list</span>\"&gt;</span>';                </span><br><span class="line">                var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);</span><br><span class="line">                $resultContent.innerHTML = "";</span><br><span class="line">                if (this.value.trim().length <span class="tag">&lt;<span class="name">=</span> <span class="attr">0</span>) &#123;</span></span><br><span class="line"><span class="tag">                    <span class="attr">return</span>;</span></span><br><span class="line"><span class="tag">                &#125;</span></span><br><span class="line"><span class="tag">                // 本地搜索主要部分</span></span><br><span class="line"><span class="tag">                <span class="attr">datas.forEach</span>(<span class="attr">function</span>(<span class="attr">data</span>) &#123;</span></span><br><span class="line"><span class="tag">                    <span class="attr">var</span> <span class="attr">isMatch</span> = <span class="string">true;</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">var</span> <span class="attr">content_index</span> = <span class="string">[];</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">var</span> <span class="attr">data_title</span> = <span class="string">data.title.trim().toLowerCase();</span></span></span><br><span class="line">                    var data_content = data.content.trim().replace(/&lt;[^&gt;]+&gt;/g,"").toLowerCase();</span><br><span class="line">                    var data_url = data.url;</span><br><span class="line">                    var index_title = -1;</span><br><span class="line">                    var index_content = -1;</span><br><span class="line">                    var first_occur = -1;</span><br><span class="line">                    // 只匹配非空文章</span><br><span class="line">                    if(data_title != '' &amp;&amp; data_content != '') &#123;</span><br><span class="line">                        keywords.forEach(function(keyword, i) &#123;</span><br><span class="line">                            index_title = data_title.indexOf(keyword);</span><br><span class="line">                            index_content = data_content.indexOf(keyword);</span><br><span class="line">                            if( index_title &lt; 0 &amp;&amp; index_content &lt; 0 )&#123;</span><br><span class="line">                                isMatch = false;</span><br><span class="line">                            &#125; else &#123;</span><br><span class="line">                                if (index_content <span class="tag">&lt; <span class="attr">0</span>) &#123;</span></span><br><span class="line"><span class="tag">                                    <span class="attr">index_content</span> = <span class="string">0;</span></span></span><br><span class="line"><span class="tag">                                &#125;</span></span><br><span class="line"><span class="tag">                                <span class="attr">if</span> (<span class="attr">i</span> == <span class="string">0)</span> &#123;</span></span><br><span class="line"><span class="tag">                                    <span class="attr">first_occur</span> = <span class="string">index_content;</span></span></span><br><span class="line"><span class="tag">                                &#125;</span></span><br><span class="line"><span class="tag">                            &#125;</span></span><br><span class="line"><span class="tag">                        &#125;);</span></span><br><span class="line"><span class="tag">                    &#125;</span></span><br><span class="line"><span class="tag">                    // 返回搜索结果</span></span><br><span class="line"><span class="tag">                    <span class="attr">if</span> (<span class="attr">isMatch</span>) &#123;</span></span><br><span class="line"><span class="tag">                    //结果标签</span></span><br><span class="line"><span class="tag">                        <span class="attr">str</span> += <span class="string">"&lt;li&gt;&lt;a href='"</span>+ <span class="attr">data_url</span> +"' <span class="attr">class</span>=<span class="string">'search-result-title'</span> <span class="attr">target</span>=<span class="string">'_blank'</span>&gt;</span>"+ "&gt; " + data_title +"<span class="tag">&lt;/<span class="name">a</span>&gt;</span>";</span><br><span class="line">                        var content = data.content.trim().replace(/<span class="tag">&lt;<span class="name">[^</span>&gt;</span>]+&gt;/g,"");</span><br><span class="line">                        if (first_occur &gt;= 0) &#123;</span><br><span class="line">                            // 拿出含有搜索字的部分</span><br><span class="line">                            var start = first_occur - 6;</span><br><span class="line">                            var end = first_occur + 6;</span><br><span class="line">                            if(start <span class="tag">&lt; <span class="attr">0</span>)&#123;</span></span><br><span class="line"><span class="tag">                                <span class="attr">start</span> = <span class="string">0;</span></span></span><br><span class="line"><span class="tag">                            &#125;</span></span><br><span class="line"><span class="tag">                            <span class="attr">if</span>(<span class="attr">start</span> == <span class="string">0)&#123;</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">end</span> = <span class="string">10;</span></span></span><br><span class="line"><span class="tag">                            &#125;</span></span><br><span class="line"><span class="tag">                            <span class="attr">if</span>(<span class="attr">end</span> &gt;</span> content.length)&#123;</span><br><span class="line">                                end = content.length;</span><br><span class="line">                            &#125;</span><br><span class="line">                            var match_content = content.substr(start, end); </span><br><span class="line">                            // 列出搜索关键字，定义class加高亮</span><br><span class="line">                            keywords.forEach(function(keyword)&#123;</span><br><span class="line">                                var regS = new RegExp(keyword, "gi");</span><br><span class="line">                                match_content = match_content.replace(regS, "<span class="tag">&lt;<span class="name">em</span> <span class="attr">class</span>=<span class="string">\</span>"<span class="attr">search-keyword</span>\"&gt;</span>"+keyword+"<span class="tag">&lt;/<span class="name">em</span>&gt;</span>");</span><br><span class="line">                            &#125;)</span><br><span class="line">                            str += "<span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">\</span>"<span class="attr">search-result</span>\"&gt;</span>" + match_content +"...<span class="tag">&lt;/<span class="name">p</span>&gt;</span>"</span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;)</span><br><span class="line">                $resultContent.innerHTML = str;</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;;</span><br><span class="line">var path = "../search.xml";</span><br><span class="line">searchFunc(path, 'local-search-input', 'local-search-result');</span><br></pre></td></tr></table></figure>
<blockquote>
<p>这里的url你也可以指定完整路径-&gt;<a href="http://localhost:4000/search.xml" target="_blank" rel="noopener">http://localhost:4000/search.xml</a><br>生成的样式需要自定义</p>
</blockquote>
<li>ul.search-result-list</li>

<li>a.search-result-title</li>

<li>p.search-result</li>

<li>em.search-keyword</li>

<h2 id="放置js文件和输入框"><a href="#放置js文件和输入框" class="headerlink" title="放置js文件和输入框"></a>放置js文件和输入框</h2><blockquote>
<p>至于放在哪，看你的喜好了<br>我放到了主页位置</p>
</blockquote>
<p>参考链接：<a href="http://www.hahack.com/codes/local-search-engine-for-hexo/" target="_blank" rel="noopener">插件作者</a></p>

      
    </div>

    
      
      



      
      
    

    
      <footer class="post-footer">
        
          <div class="post-tags">
            
              <a href="/tags/hexo/">hexo</a>
            
              <a href="/tags/hexo-generator-search/">hexo-generator-search</a>
            
          </div>
        
        
        
  <nav class="post-nav">
    
      <a class="prev" href="/2017/08/07/如何在github上pull-request代码/">
        <i class="iconfont icon-left"></i>
        <span class="prev-text nav-default">如何在github上pull request代码</span>
        <span class="prev-text nav-mobile">上一篇</span>
      </a>
    
    
      <a class="next" href="/2017/07/06/大学第一个暑假开始了/">
        <span class="next-text nav-default">大学第一个暑假开始了</span>
        <span class="prev-text nav-mobile">下一篇</span>
        <i class="iconfont icon-right"></i>
      </a>
    
  </nav>

      </footer>
    

  </article>


          </div>
          
  <div class="comments" id="comments">
      <div id="disqus_thread">
        <noscript>
          Please enable JavaScript to view the
          <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a>
        </noscript>
      </div> 
    </div>
  </div>


        </div>
      </main>

      <footer id="footer" class="footer">

  <div class="social-links">
    
      
        
          <a href="https://github.com/bay1" class="iconfont icon-github" title="github"></a>
        
      
    
      
        
          <a href="http://weibo.com/3190704711/profile?topnav=1&wvr=6&is_all=1" class="iconfont icon-weibo" title="weibo"></a>
        
      
    
      
    
      
    
      
    
    
    
  </div>


<div class="copyright">
  <span class="copyright-year">
    
    &copy; 
     
      2016 - 
    
    2018
    <span class="author">bay1</span>
  </span>
</div>
      </footer>

      <div class="back-to-top" id="back-to-top">
        <i class="iconfont icon-up"></i>
      </div>
    </div>

    
  
  <script type="text/javascript">
    var disqus_config = function () {
        this.page.url = 'https://bay1.top/2017/07/20/如何实现站内搜索/';
        this.page.identifier = '2017/07/20/如何实现站内搜索/';
        this.page.title = 'hexo如何添加自定义站内搜索';
    };
    (function() {
    var d = document, s = d.createElement('script');

    s.src = '//https-blog-flywinky-top-1.disqus.com/embed.js';

    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();  
  </script>



    
  





  
    <script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
  

  
    <script type="text/javascript" src="/lib/slideout/slideout.js"></script>
  

  
    <script type="text/javascript" src="/lib/fancybox/jquery.fancybox.pack.js"></script>
  


    <script type="text/javascript" src="/js/src/even.js?v=2.6.0"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=2.6.0"></script>
<script src="/js/prettify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('pre').addClass('prettyprint');
   prettyPrint();
 })
</script>
  </body>
</html>
